<template>
	<view>
		<view v-for="(messageAbstract, index) in messageList" @click=onClickMessagePiece(index)>
			<message-piece :messageAbstract="messageAbstract" class="messagePiece"></message-piece>
			<uv-divider v-if="index + 1 < messageList.length"></uv-divider>
		</view>
	</view>
</template>

<script setup>
	let messageList = [{
			avatar: "https://pic1.zhimg.com/v2-da2b0a3b96103d87a682409fc5a261a9_r.jpg?source=1def8aca",
			username: "张三",
			lastMessage: "你好！",
		},
		{
			avatar: "https://picx.zhimg.com/v2-4132ebba15591caab598f8bc3533cb10_r.jpg?source=1def8aca",
			username: "李四",
			lastMessage: "周末打球？"
		},
		{
			avatar: "https://ts1.cn.mm.bing.net/th/id/R-C.f23301faaa645ddb2c90381bb368b778?rik=HGiferJo1Msdeg&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1208%2f09%2fc1%2f12788328_1344484585308.jpg&ehk=HM8tHpdH2UPCwT65cB5GTQ0m3QJKjN%2bRVQz3NfP%2bU2c%3d&risl=&pid=ImgRaw&r=0",
			username: "王五",
			lastMessage: "好的"
		},
		{
			avatar: "https://pic.ntimg.cn/file/20220326/25839194_095401590106_2.jpg",
			username: "周天",
			lastMessage: "okk~"
		}
	];

	function onClickMessagePiece(index) {

		console.log("第" + index + "条被点击");
		uni.navigateTo({
			url: 'message-chat/message-chat'
		});
	}
</script>
<style lang="scss">
	.messagePiece {
		margin: 20rpx;
	}
</style>